<template>
	<view>
		<view>
			<view class="u-demo-block">
				<u-swiper :list="list3" keyName="image" showTitle previousMargin="35" height='200' nextMargin="35"
					circular :autoplay="false" radius="15" bgColor="#ffffff" @click='swiperClick'></u-swiper>
			</view>
		</view>
		<view class='courseLise'>
			<text style='font-size:20px'>课程列表</text>
			<view class='courseLise_detail' @click='courseClick(item)' v-for="item in courseList">
				<view class='courseLise_detail_left'>
					<image src="/static/study/study_view.png" mode="" style='width:180rpx;height:180rpx;'></image>
				</view>
				<view class='courseLise_detail_right'>
					<text style='font-size:35rpx;'>{{item.lessonName}}</text>
					<text class='courseLise_detail_right_title'>学习班名称：{{item.className}}</text>
					<text class='courseLise_detail_right_title'>学习截止时间：{{item.endTime}}</text>
					<u-line-progress :percentage="item.videoTime==0?0:((item.alreadyTime/item.videoTime)*100)"
						height="18" :showText="false" activeColor="#FFBC00" style='width:67%;display:inline-block'>
					</u-line-progress>
					<text
						style='font-size:22rpx;margin: 0 0 0 4px'>已学习{{item.videoTime==0?0:((item.alreadyTime/item.videoTime)*100).toFixed(0)}}%</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list3: [{
						image: '/static/study/banner1.png',
						title: ''
					},
					{
						image: '/static/study/banner2.png',
						title: ''
					},
					{
						image: '/static/study/banner3.png',
						title: ''
					},
				],
				courseList: [],
				list: 15,
				page: 0
			};
		},
		onLoad() {},
		onShow() {},
		mounted() {
			this.search()
		},
		methods: {
			search() {
				this.$api.getCourse({}).then(res => {
					this.courseList = res.data.data
					for (let i = 0; i < 3; i++) {
						this.list3[i].title = this.courseList[i]?.lessonName
					}
				})
			},

			// 课程列表
			courseClick(item) {
				this.$goBack('../on-line-study/courseDetails?lessonId=' + item.lessonId + '&classId=' +
					item.classId, 2);
			},

			// 轮播图 点击事件
			swiperClick(index) {
				// console.log(this.courseList[index])
				if (this.courseList[index]) {
					this.$goBack('../on-line-study/courseDetails?lessonId=' + this.courseList[index].lessonId + '&classId=' +
						this.courseList[index].classId, 2);
				}

			}
		},
	}
</script>


<style lang="scss" scoped>
	.courseLise {
		padding: 15px;
		margin: 15px 0 0 0;

		.courseLise_detail {
			margin: 15px 0;
			display: flex;
			justify-content: space-evenly;

			.courseLise_detail_left {
				width: 30%;
				height: 100%;
				display: inline-block;
				padding: 0 0 0 10px;
			}

			.courseLise_detail_right {
				width: 60%;
				height: 100%;
				display: inline-block;

				.courseLise_detail_right_title {
					font-size: 15rpx;
					display: block;
					color: #7E8EAA;
					margin: 5px 0;

				}

			}

		}
	}
</style>